body {
    min-width: 320px;
    width: 10rem;

    /* 让body居中 */
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f2f2f2;

    /* 只考虑移动端，屏幕宽度超过750时，页面宽度最大为750 */
    max-width: 750px;
}

a {
    text-decoration: none;
    font-size: 0.333333rem;
}

input {
    font-size: 0.333333rem;
}

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

.header {
    position: fixed;
    /* 定位元素必须要设置宽度 */
    width: 10rem;

    /* 让定位元素水平居中 */
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    height: 1.173333rem;
    background-color: #ffc001;

    display: flex;
}

.header .categories {
    /* display: block; */
    width: 0.586667rem;
    height: 0.933333rem;

    margin: 0.146667rem 0.333333rem 0.133333rem;

    background: url(../images/classify.png) no-repeat;
    background-size: 0.586667rem 0.933333rem;
}

.header .search-box {
    flex: 1;
    padding-top: .133333rem;
    line-height: 1;
}

.header .search-box input {
    width: 100%;
    height: 0.88rem;

    padding-left: 0.533333rem;
    background-color: #fff2cc;
    color: #757575;

    outline: none;
    border: 0;
    border-radius: .44rem;

}

.header .login-btn {
    /* display: block; */
    /* 先确定宽高 */
    width: 1rem;
    height: 0.933333rem;
    /* 移动到合适的位置 */
    margin: 0.133333rem;
    /* 居中 */
    line-height: 0.933333rem;
    text-align: center;

    /* 明确文字大小与颜色 */
    font-size: 0.333333rem;
    color: #fff;
}

.banner {
    width: 10rem;
    height: 3.466667rem;
}

.banner img {
    width: 100%;
    height: 100%;
}

.adver {
    display: flex;
}

.adver a {
    flex: 1;
}

.adver a img {
    width: 100%;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* .nav a {
    flex-basis: 2rem;
    width: 2rem;
    flex: 1;
    box-sizing: border-box;

    margin: .266667rem;

    display: flex;
    flex-direction: column;
}

.nav a img {
    margin: .133333rem;
    width: 1.093333rem;
} */
.nav a {
    /* flex: 1; */
    /* flex-basis: 2rem; */
    width: 2rem;
    /* margin: 0 auto; */

    display: flex;
    flex-direction: column;

    text-align: center;
    /* justify-content: center; */
    /* 子项目水平居中 ，因为主轴为 y轴 */
    align-items: center;
}

.nav a img {
    width: 1.093333rem;
    /* margin: 0 auto; */
}